<template>
  <div class="about-container">
    <el-card class="about-card">
      <template #header>
        <div class="about-header">
          <el-icon><InfoFilled /></el-icon>
          <h1>关于今日油价查询系统</h1>
        </div>
      </template>
      
      <div class="about-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <h3>系统介绍</h3>
            <p>
              今日油价查询系统是一个基于Vue3 + ElementPlus开发的现代化油价查询平台，
              为用户提供实时、准确的全国各省市油价信息查询服务。
            </p>
          </el-col>
        </el-row>

        <el-divider />

        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <h3>功能特色</h3>
            <ul>
              <li>实时油价查询</li>
              <li>全国各省市覆盖</li>
              <li>多种油品类型支持</li>
              <li>涨跌趋势分析</li>
              <li>数据可视化展示</li>
              <li>响应式设计</li>
            </ul>
          </el-col>
          
          <el-col :span="12" :xs="24">
            <h3>支持油品</h3>
            <ul>
              <li>92号汽油</li>
              <li>95号汽油</li>
              <li>98号汽油</li>
              <li>0号柴油</li>
              <li>-10号柴油</li>
            </ul>
          </el-col>
        </el-row>

        <el-divider />

        <el-row :gutter="20">
          <el-col :span="24">
            <h3>技术架构</h3>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="前端框架">Vue 3</el-descriptions-item>
              <el-descriptions-item label="UI组件库">ElementPlus</el-descriptions-item>
              <el-descriptions-item label="状态管理">Pinia</el-descriptions-item>
              <el-descriptions-item label="路由管理">Vue Router</el-descriptions-item>
              <el-descriptions-item label="构建工具">Vite</el-descriptions-item>
              <el-descriptions-item label="编程语言">TypeScript</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <el-divider />

        <el-row :gutter="20">
          <el-col :span="24">
            <h3>免责声明</h3>
            <p class="disclaimer">
              本系统提供的油价数据仅供参考，实际油价可能因地区、加油站品牌、优惠活动等因素有所差异。
              请以当地加油站实际价格为准。我们不承担因使用本系统数据而产生的任何损失或责任。
            </p>
          </el-col>
        </el-row>

        <el-divider />

        <el-row :gutter="20">
          <el-col :span="24">
            <h3>联系我们</h3>
            <p>
              如有任何问题或建议，欢迎通过以下方式联系我们：<br>
              邮箱：support@oilprice.example.com<br>
              电话：400-123-4567
            </p>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.about-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.about-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.about-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: bold;
}

.about-content {
  padding: 20px 0;
}

.about-content h3 {
  color: #409eff;
  margin-bottom: 15px;
}

.about-content ul {
  list-style-type: none;
  padding: 0;
}

.about-content li {
  padding: 5px 0;
  position: relative;
  padding-left: 20px;
}

.about-content li::before {
  content: '•';
  color: #409eff;
  position: absolute;
  left: 0;
}

.disclaimer {
  color: #f56c6c;
  font-style: italic;
}

@media (max-width: 768px) {
  .about-container {
    padding: 20px 10px;
  }
}
</style>
